<template>
	<div class="seller" ref="sellerWrapper">
		<div class="seller-content">
			<div class="seller-header">
				<h1 class="title">{{seller.name}}</h1>
				<div class="desc border-1px">
					<star class="star" :score="seller.score" :size="36"></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h2 class="name">起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2 class="name">商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2 class="name">平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>分钟
						</div>
					</li>
				</ul>
				<div class="favorite">
					<i class="icon-favorite" :class="{active:flag}" @click="addFavorite"></i>
					<div class="msg">{{message}}</div>
				</div>
			</div>
			<split></split>
			<div class="bulletin border-1px">
				<h3 class="title">公告与活动</h3>
				<p class="content">{{seller.bulletin}}</p>
			</div>
			<ul class="supports" v-if="seller.supports">
				<li v-for="item in seller.supports" class="support-item border-1px">
					<span class="icon" :class="classMap[item.type]"></span>
					<span class="text">{{item.description}}</span>
				</li>
			</ul>
			<split></split>
			<div class="seller-list">
				<h3 class="title">商家实景</h3>
				<div class="pic-wrapper" ref="picWrapper">
					<ul class="pic-content" ref="picContent">
						<li v-for="item in seller.pics" class="pic-item">
							<img :src="item" width="120" height="90"/>
						</li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h3 class="title border-1px">商家信息</h3>
				<ul>
					<li v-for="item in seller.infos" class="info-item border-1px">
						{{item}}
					</li>
				</ul>
			</div>
		</div>
		<shopCart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopCart>
	</div>
</template>

<script>
	import star from '@/components/star.vue'
	import split from '@/components/split.vue'
	import BScroll from 'better-scroll'
	import shopCart from '@/components/ShopCart.vue'
	export default{
		name:'seller',
		data(){
			return{
				classMap:[],
				message:'',
				flag:false
			}
		},
		methods:{
			addFavorite(){
				if(this.flag){
					this.flag=false
					this.message='未收藏'
				}else{
					this.flag=true
					this.message='已收藏'
				}
				localStorage.setItem('flag',this.flag)
			}
		},
		props:{
			seller:{
				type:Object
			}
		},
		components:{
			star,
			split,
			shopCart
		},
		created(){
			this.classMap=['decrease','discount','guarantee','invoice','special']
		},
		mounted(){
			//console.log(typeof localStorage.getItem('flag'))
			//先从本地存储中获取flag
			let result=localStorage.getItem('flag')
			if(result=='true'){
				this.flag=true
				this.message='已收藏'
			}else{
				this.flag=false
				this.message='未收藏'
			}
			//页面滚动
			this.$nextTick(()=>{
				this.scroll=new BScroll(this.$refs.sellerWrapper,{
					click:true
				})
			})
			if(this.seller.pics){
				//console.log(123)
				let picWidth=120
				let margin=6
				let width=(picWidth+margin)*this.seller.pics.length-margin
				this.$refs.picContent.style.width=width+'px'
				this.$nextTick(()=>{
					this.picScroll=new BScroll(this.$refs.picWrapper,{
						scrollX:true,
						eventPassthrough:'vertical'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../common/style/mixin.scss';
	.seller{
		position: absolute;
		left: 0;
		top: 176px;
		bottom: 48px;
		width: 100%;
		overflow: hidden;
		.seller-content{
			.seller-header{
				position: relative;
				padding: 18px;
				.title{
					margin-bottom: 8px;
					font-size: 14px;
					color: rgb(7,17,27);
					line-height: 14px;
					font-weight: 700;
				}
				.desc{
					padding-bottom: 18px;
					margin-bottom: 18px;
					@include  border-1px(rgba(7,17,27,0.1));
					.star{
						display: inline-block;
						margin-right: 8px;
						vertical-align: top;
					}
					.text{
						font-size: 10px;
						line-height: 18px;
						color: rgb(77,85,93);
						margin-right: 12px;
						font-weight: 200;
						vertical-align: top;
					}
				}
				.remark{
					display: flex;
					.block{
						flex: 1;
						text-align: center;
						border-right: 1px solid rgba(7,17,27,0.1);
						&:last-child{
							border:none
						}
						.name{
							margin-bottom: 4px;
							font-size: 10px;
							line-height: 10px;
							color: rgb(147,153,159);
							font-weight: 200;
						}
						.content{
							font-size: 10px;
							line-height: 24px;
							color: rgb(7,17,27);
							.stress{
								font-size: 24px;
							}
						}
					}
				}
				.favorite{
					position: absolute;
					top: 18px;
					right: 18px;
					text-align: center;
					.icon-favorite{
						font-size: 24px;
						line-height: 24px;
						color: rgb(147,153,159);
						margin-bottom: 4px;
					}
					.active{
						color: rgb(240,20,20);
					}
					.msg{
						font-size: 10px;
						line-height: 10px;
						color: rgb(147,153,159);
					}
				}
			}
			.bulletin{
				margin: 18px 18px 0px 18px;
				padding-bottom: 16px;
				@include  border-1px(rgba(7,17,27,0.1));
				.title{
					font-size:14px;
					font-weight: 700;
					line-height: 14px;
					margin-bottom: 8px;
				}
				.content{
					font-size: 12px;
					line-height: 24px;
					font-weight: 400;
					color: rgb(240,20,20);
					padding: 0 12px;
				}
			}
			.supports{
				margin: 0 18px;
				.support-item{
					padding: 16px 12px;
					@include  border-1px(rgba(7,17,27,0.1));
					&:last-child{
						@include  border-none();
					}
					.icon{
						display: inline-block;
						width: 16px;
						height: 16px;
						margin-right: 6px;
						vertical-align: top;
						background-size: 16px 16px;
						background-repeat: no-repeat;
						&.decrease{
							@include bg-image('../common/img/decrease_1')
						}
						&.discount{
							@include bg-image('../common/img/discount_1')
						}
						&.guarantee{
							@include bg-image('../common/img/guarantee_1')
						}
						&.invoice{
							@include bg-image('../common/img/invoice_1')
						}
						&.special{
							@include bg-image('../common/img/special_1')
						}
					}
					.text{
						font-size: 12px;
						line-height: 16px;
						color: rgb(7,17,27);
						font-weight: 200;
						vertical-align: top;
					}
				}
				
			}
			.seller-list{
				padding:18px;
				.title{
					margin-bottom: 12px;
					font-size:14px;
					font-weight: 700;
					line-height: 14px;
				}
				.pic-wrapper{
					.pic-content{
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						.pic-item{
							display: inline-block;
							margin-right: 6px;
							width: 120px;
							height: 90px;
							&:last-child{
								margin: 0;
							}
						}	
					}
				}
			}
			.info{
				padding: 18px;
				padding-bottom: 0;
				.title{
					padding-bottom: 12px;
					font-size: 14px;
					font-weight: 700;
					line-height: 14px;
					color: rgb(7,17,27);
					@include  border-1px(rgba(7,17,27,0.1))
				}
				.info-item{
					padding: 16px 12px;
					line-height: 16px;
					font-size: 12px;
					font-weight: 200;
					color: rgb(7,17,27);
					@include border-1px(rgba(7,17,27,0.1));
					&:last-child{
						@include  border-none()
					}
				}
			}
		}
	}
	
</style>
